<template>
<div v-loading="loading">
    <el-form ref="ff" label-width="88px" :model="form">
      <el-form-item label="课程标题">
        <el-input :readonly="readonly" v-model="form.courseTitle" />
      </el-form-item>
      <el-form-item label="课程课时">
        <el-input :readonly="readonly" v-model="form.courseTime" />
      </el-form-item>
      <el-form-item label="课程分类">
        <el-select :readonly="readonly" v-model="form.courseClass" placeholder="请选择">
          <el-option
            v-for="item in fenlei"
            :key="item.dictCode"
            :label="item.dictLabel"
            :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程训练">
        <el-select :readonly="readonly" size="medium" v-model="form.trainIds" multiple placeholder="请选择">
          <el-option
            v-for="item in xunlian"
            :key="item.id"
            :label="item.trainingName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程封面">
        <el-upload
          :readonly="readonly"
          class="avatar-uploader"
          action="http://47.101.57.131:8101/common/api/file/upload2"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
          <img v-if="form.coverPicture" :src="form.coverPicture" class="avatar"  alt=""/>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item
        v-for="item of form.courseIntroIds"
        :key="item.id || item.introField"
        :label="item.introField">
        <tinymce-component :height="350" v-model="item.introFieldValue" />
      </el-form-item>
      <el-form-item>
        <el-button v-show="!readonly" type="primary" @click="submit">确 定</el-button>
      </el-form-item>
    </el-form>

</div>
</template>

<script>
import tinymceComponent from '@/components/tinymce'
import {addKc, getKc, getKcx,detailKc,updateKc} from "@/api/kecheng";

const getDefaultForm = () => ({
  "courseTitle": "",
  "courseTime": 1,
  "courseClass": "",
  "coverPicture": "",
  "fileId": 1,
  "trainIds": [],
  "courseIntroIds": [{
    "introField": "简介",
    "introFieldValue": "",
    "location": 3,
    "fieldSort": 1
  },{
    "introField": "课程安排",
    "introFieldValue": "",
    "location": 3,
    "fieldSort": 2
  },{
    "introField": "面向群体",
    "introFieldValue": "",
    "location": 3,
    "fieldSort": 3
  },{
    "introField": "课程内容",
    "introFieldValue": "",
    "location": 3,
    "fieldSort": 4
  },{
    "introField": "课程优势",
    "introFieldValue": "",
    "location": 3,
    "fieldSort": 5
  },{
    "introField": "教学特点",
    "introFieldValue": "",
    "location": 3,
    "fieldSort": 6
  }]
})
export default {
  name: "kcf",
  components:{
    tinymceComponent
  },
  data() {
    return {
      form:getDefaultForm(),
      fenlei:[],
      xunlian:[],
      loading:false,
      readonly:false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList(){
      if (this.$route.query.view){
        this.readonly = true
      }
      if (this.$route.query.id){
        this.loading = true
        const res = await detailKc(this.$route.query.id)
        res.data.lxCourseDetail['courseIntroIds'] = res.data.introList
        res.data.lxCourseDetail['trainIds'] = res.data.trainIds
        this.form = res.data.lxCourseDetail
        setTimeout(()=>{
          this.loading = false
        },500)
      }
      getKc(1,10000).then(res=>{
        console.log(res)
        this.fenlei = res.data.records
      })
      getKcx(1,100000).then(res=>{
        this.xunlian = res.data.records
      })
    },
    async submit(){
      console.log(this.form)
      if (this.$route.query.id){
        const res1  = await updateKc(this.form)
        console.log(res1,"编辑")
      }else {
        const res = await addKc(this.form)
        console.log(res)
      }
      this.$message.success('操作成功')
      this.$router.back()
    },
    handleAvatarSuccess(res){
      console.log(res)
      this.form.oldFileId = this.form.fileId
      this.form.coverPicture = res.data.fileUrl
      this.form.fileId = res.data.id
    },
  }
}
</script>

<style scoped>

</style>
